<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        li{
            width: 40px;
            height: 20px;
            border: 1px solid #000;
            list-style: none;
            margin: 20px;
            background: #ccc;
            border-radius: 5px;
            text-align: center;
        }
        .active{
            background: rgb(199, 210, 40);
        }
    </style>
</head>
<body>
    <ul>
        <li>张三</li>
        <li>李四</li>
        <li>王五</li>
        <li>孙九</li>
        <li>赵八</li>
    </ul>
    <button class="btn">开始</button>
    <button class="btnStop">结束</button>
</body>
</html>
<script src="../word2/day01/js/lodash.js"></script>
<script>
    const li = document.querySelectorAll('li')
    const btn = document.querySelector('.btn')
    const btnStop = document.querySelector('.btnStop')

        let arr = []
        li.forEach((i,x,z) => {
            
            arr.push(i.innerText)
        })
        btn.onclick = function(){
        
            const set = setInterval(() => {
                li.forEach((li) => {
                    li.classList.remove('active')
                })

                const st =_.random(0,li.length-1)
            
                li[st].classList.add('active')


                
                btnStop.onclick = function () {

                    clearInterval(set)

                    

                    li.forEach((li) => {

                        li.classList.remove('active')
                        // console.log();

                    })
                    
                    
    
                }
            },30)
            
        }



    
</script>